<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title>分页1</title>

    <style>
    	ul,li{margin: 0;padding: 0;list-style: none;}
    	.pageMenu li::selection{background:transparent;}
    	.clearfix{zoom:1;}
		.clearfix:after{content:"";display: block;clear: both;}
		.pageBox{width:800px;background: #eee;border:1px solid #ebebeb;padding: 10px;margin: 0 auto;}
		.pageDiv{width: 98.75%;background: #fff;padding-left: 1.25%;margin-bottom: 10px;}
		.pageDiv li{margin-bottom: 10px;border:1px solid #dbdbdb;width: 21.5%;margin-right: 1.25%;float:left;margin-top: 10px;padding: 1%;text-align: center;}
		.hide{display: none;}
		.notContent{padding: 15px 0;text-align: center;}

		.page{text-align: center;width: 100%;margin: 0 auto;}
		.pageMenu{display: inline-block;width: 90%;}
		
		.pageMenu li{border: solid thin #ddd;margin: 3px;float: left;padding: 5px 10px;cursor: pointer;background: #fff;}
		.pageMenu li.firstPage{}
		.pageMenu li.prevPage{}
		.pageMenu li.pageNum{}
		.pageMenu li.nextPage{}
		.pageMenu li.lastPage{}
		.pageMenu li.disabled{ background-color: #DDDDDD;   cursor: not-allowed;}
		.pageMenu li.active{ border: solid thin #0099FF;background-color: #0099FF;color: white;}
		.pageMenu li.last{background: transparent;border:0;position: relative;top: -4px;}
		.page .keuInput{padding: 0 5px;width: 30px;border: solid thin #ddd;height: 29px;outline: none;text-align: center;font-size: 16px;}
		.page .btnSure{padding: 4px 8px;border: solid thin #ddd;outline: none;text-align: center;font-size: 16px;background: #fff;position: relative;top: 2px;}
		.page .btnSure:hover{cursor: pointer;}
	</style>
    
</head>
<body>
    <div class="pageBox">
		<ul class="pageDiv clearfix">
		
		</ul>
		<div class="notContent hide">
			无数据
		</div>
		<div class="page">
			<ul class="pageMenu clearfix">
				<li class="firstPage">首页</li>
				<li class="prevPage"> < 上一页 </li>
				<div class="pageObj ">
					
				</div>
				<li class="nextPage"> 下一页 > </li>
				<li class="lastPage">尾页</li>
				<li class="last" style="font-size: 14px;">
					共<span class="totalPage"></span>页，跳转至 <input type="number" class="keuInput" value="1">
					<button type="button" class="btnSure">确定</button>
				</li>
			</ul>
		</div>
    </div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="js/page.js"></script>
    <script>
    	$(function(){
    		$(".pageBox").pageFun({  /*在本地服务器上才能访问哦*/
    			interFace:"data/page.json",  /*接口*/
    			displayCount:4,  /*每页显示总条数*/
    			maxPage:5,/*每次少最多加载多页*/
    			dataFun:function(data){
					console.log(data);
    				var dataHtml = '<li>'+data.dataNum+'</li>';
    					return dataHtml;
    			},
    			pageFun:function(i){
    				var pageHtml = '<li class="pageNum">'+i+'</li>';
					console.log(i);
						return pageHtml;
    			}

    		})
    	})
    </script>
</body>
</html>

